<template>
  <!-- 我的福分 -->
  <div class="box">
    <div class="blessings_total">
      <span>总元宝</span>
      <span class="fontSize">{{tmall_datail.remain}}</span>
      <b @click="show_power" class="right" style="color:rgba(0, 114, 255, 0.88);margin: 0px 10px 10px;font-weight:400">
          前往天猫福宝>>
      </b>
    </div>
    <div class="blessings_top">
      <van-row>
      <van-col span="8" style="border:none">
        <div class="flex_list">收入</div>
        <span class="fontSize">{{tmall_datail.income}}</span>
      </van-col>
      <van-col span="8">
        <div  class="flex_list">可转换{{D_name}}</div>
        <span class="fontSize">{{tmall_datail.transCode}}</span>
        <div
          style="color:rgba(0, 114, 255, 0.88)"
          @click="showTarght"
        >转换</div>
      </van-col>
      </van-row>
    </div>
    <div class="blessings_content">
      <van-row>
        <van-col
          span="12"
          :style="{fontSize:'16px',color:'rgba(0, 114, 255, 0.88)'}"
          @click="time = true"
        >{{data_time}}
          <van-icon name="arrow-down" />
        </van-col>
        <!-- 时间 -->
        <van-popup
          v-model="time"
          :safe-area-inset-bottom="true"
          :style="{width:'86%',fontSize:'14px',borderRadius:'10px'}"
          :overlay-style="{background:'rgba(0, 0, 0, 0.34)'}"
        >
          <van-datetime-picker
            v-model="currentDate"
            type="year-month"
            :min-date="minDate"
            :max-date="maxDate"
            @confirm="getTime"
            @cancel="time=false"
          />
        </van-popup>
      </van-row>
    </div>
    <div
      class="blessing_list"
      v-for="(item,i) in list"
      :key="i"
    >
      <h4 style="margin:0px;">{{item.tranMemo}}</h4>
      <p style="margin:0px;">
        <span style="font-size:12px;color: silver;"> {{item.tranTimestamp}}</span>
        <span class="right">{{item.amount*100}}</span>
      </p>
    </div>
    <p style="color:#b0aeae;display:none">本月暂无元宝申请记录</p>
  </div>
</template>
<script type="text/javascript">
import axios from "axios"
import {
  Row,
  Col,
  Icon,
  Popup,
  RadioGroup,
  Radio,
  Cell,
  CellGroup,
  DatetimePicker,
} from "vant";
export default {
  data() {
    return {
      radio: 0,
      show: false,
      time: false,
      tmall_datail:{},
      list: [],
      data_time: "",
      minDate: new Date(2018, 0),
      maxDate: new Date,
      currentDate: new Date(),
      people_userId: 0,
      corp_Id: 0,
      D_name:''
    };
  },
  components: {
    [Row.name]: Row,
    [Col.name]: Col,
    [Icon.name]: Icon,
    [Popup.name]: Popup,
    [RadioGroup.name]: RadioGroup,
    [Radio.name]: Radio,
    [Cell.name]: Cell,
    [CellGroup.name]: CellGroup,
    [DatetimePicker.name]: DatetimePicker,
  },
  created() {
    this.D_name = localStorage.getItem("d_name");
    this.people_userId = localStorage.getItem("userId");
    this.corp_Id = localStorage.getItem("custid");
    this.dataTime();
    dd.biz.navigation.setTitle({
      title: "我的元宝" //控制标题文本，空字符串表示显示默认文本
    });
  },
  methods: {
    // 天猫福宝跳转
    show_power(){
        this.$router.replace("/power");
    },
    getTime(time) {
      const d = new Date(time);
      let yy = d.getFullYear();
      let mm = this.p(d.getMonth() + 1);
      const resDate = d.getFullYear() + "-" + this.p(d.getMonth() + 1);
      this.data_time = resDate;
      this.getSendList(resDate)
      this.time = false;
    },
    p(s) {
      return s < 10 ? "0" + s : s;
    },
    dataTime() {
      let yy = new Date().getFullYear();
      let mm = new Date().getMonth() + 1;
      let month;
      if (mm < 10) {
        month = "0" + mm;
      } else {
        month = mm;
      }
      let year = yy + "-" + month;
      this.getMyWing();
      this.getSendList(year);
      this.data_time = year;
    },
    async getMyWing() {
      const res = await this.$http.post(
        'yuepoints/tmall/detail',{
        corpId:this.corp_Id,
        userId:this.people_userId
        }
      );
      this.tmall_datail = res.data.data
    },
  async getSendList(year) {
      const res =await this.$http.get(`yuepoints/tmall/sendList?corpId=${this.corp_Id}&userId=${this.people_userId}&date=${year}`)
      this.list = res.data.data
      },
    showTarght() {
      this.$router.replace("/YbTransformation");
    }
  }
};
</script>

<style lang="less" scoped>
.box {
  font-size: 15px;
  padding-bottom: 55px;
  background: #f8f8fa;
  .blessings_total {
    background: #fff;
    border-bottom: 1px solid silver;
    padding: 30px 0px;
    span {
      display: block;
    }
  }
  .blessings_top {
    background: #fff;
    border-bottom: 1px solid silver;
    /deep/ .van-col{
      padding-top:15px;
      height: 120px;
      width: 50%;
      border-left: 1px solid silver
    }
    .flex_list{
      margin: 10px;
    }
  }
  .blessings_content {
    background: #fff;
    height: 45px;
    line-height: 45px;
    margin: 5px auto;
    /deep/ .van-col{
      width: 100%;
    }
  }
  .blessing_list {
    border-bottom: 1px solid #c0c0c059;
    background: #fff;
    text-align: left;
    padding: 5px 15px;
  }
  .left {
    float: left;
  }
  .right {
    float: right;
  }
  .fontSize {
    font-size: 22px;
  }
}
</style>
